<template>
  <basic-container>
    <el-row>
      <el-col :span="8"
              :offset="8">
        <el-input v-model="text"
                  placeholder="使用ES搜索引擎搜索文章。匹配作者、标题、标签、简介"
                  suffix-icon="el-icon-search"
                  @change="searchList"></el-input>

      </el-col>
    </el-row>
    <div class="article-container">
      <el-scrollbar style="height: 100%;">
        <el-row>
          <el-col :span="18"
                  :offset="3"
                  v-for="(item,index) in data"
                  :key="index">
            <div class="article-item">
              <el-card shadow="hover">
                <el-row>
                  <el-col :span="8">
                    <el-image class="coverPicture"
                              :src="item.coverPicture"
                              :preview-src-list="[ item.coverPicture ]" />
                  </el-col>
                  <el-col :span="16">
                    <el-row class="label">
                      <el-col :span="12">作者：<span v-html="item.hit_author || item.author"></span> </el-col>
                      <el-col :span="12">发布日期：{{formatData(item.createTime)}} </el-col>
                      <el-col :span="24"> 标签：<span v-html="item.hit_label || item.label"></span></el-col>
                    </el-row>
                    <el-row class="title"> 标题：<span v-html="item.hit_title || item.title"></span></el-row>
                    <el-row class="introduction"> 简介： <span v-html=" item.hit_introduction || item.introduction"></span></el-row>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
    <el-row>
      <el-col :span="8"
              :offset="16">
        <el-pagination :page-sizes="[4, 8, 16]"
                       :page-size="page.pageSize"
                       :current-page="page.currentPage"
                       :pager-count="5"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="page.total"
                       @size-change="handleSizeChange"
                       @current-change="pageChange" />
      </el-col>
    </el-row>
  </basic-container>
</template>
<script>
import { fetchEsList } from '@/api/marketing/article'
import { format } from '@/util/date'

export default {
  name: 'esArticle',
  data () {
    return {
      text: '',
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 4, // 每页显示多少条
      },
      data: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      fetchEsList({
        current: this.page.currentPage,
        size: this.page.pageSize,
        text: this.text
      }).then((response) => {
        this.data = response.data.data.records;
        this.page.total = response.data.data.total;
      })
    },
    searchList () {
      this.page.currentPage = 1
      this.page.pageSize = 4
      this.getList()
    },
    formatData (time) {
      return format(new Date(Number(time)), 'yyyy-MM-dd hh:mm');
    },
    // 改变当前页数
    pageChange (page) {
      this.page.currentPage = page;
      this.getList();
    },
    // 改变每页条数
    handleSizeChange (size) {
      this.page.pageSize = size;
      this.getList();
    },
  }

}
</script>

<style scoped>
.article-container {
  width: 100%;
  height: 660px;
  padding: 20px 0px;
}

.article-item {
  padding: 5px 50px 0px 50px;
}
.label {
  color: grey;
  font-size: 12px;
}
.title {
  padding: 5px 0px 0px 0px;
  font-size: 14px;
}
.introduction {
  padding: 10px 0px 0px 0px;
  color: gray;
  font-size: 12px;
}
.coverPicture {
  width: 200px;
  height: 140px;
  border-radius: 10px;
  cursor: pointer;
}

.article-container /deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>